<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views-jsp/include/taglib/taglib.jsp" %>
<html>
    <head>
        <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ include file="/WEB-INF/views-jsp/include/link/link.jsp" %>
        <%@ include file="/WEB-INF/views-jsp/include/script/script.jsp" %>
        <link rel="stylesheet" type="text/css" href="${path}/html/js/js-jsp/me/craneDataShow/craneDataShow.css" />
        <link rel="stylesheet" type="text/css" href="${path}/html/js/js-jsp/custom/dyProgressBar/css/dyProgressBar.css"/>
        <script type="text/javascript" src="${path}/html/echart/echarts.min.js"></script>
        <script type="text/javascript" src="${path}/html/js/js-jsp/custom/dyProgressBar/js/dyProgressBar.js"></script>
        <script type="text/javascript" src="${path}/html/js/js-jsp/me/craneDataShow/craneDataShow.js?v=<%out.print(Math.random());%>"></script>
    </head>
    <body id="craneDataBodyId_">
    <div class="craneBox">
        <div class="craneBox-left">
            <div class="craneBox-left-top">
                <div class="topTitle">
                    <p>
                        <span class="titleDot"></span>
                        <span style="margin-left: 18px;">实时数据</span>
                    </p>
                </div>
                <hr class="hrStyle"/>
                <div class="basicData">
                    <div class="basicDataLeft">
                        <input type="hidden" id="windSpeedHd_" value="${requestScope.deviceData.craneProject.craneStandard.maxWindSpeed==null?"无":requestScope.deviceData.craneProject.craneStandard.maxWindSpeed}"/>
                        <p class="basicTitle">
                            <span>
                                  <img src="${path}/html/images/crane/title.png"/>
                            </span>
                            <span class="basicTitleInner">
                                设备基本信息
                            </span>
                        </p>
                        <p>
                            <span>
                                设备编号：
                            </span>
                            <span id="deviceId_">${requestScope.deviceData.craneProject.deviceId==null?"无":requestScope.deviceData.craneProject.deviceId}</span>
                        </p>
                        <p>
                            <span>
                                设备型号：
                            </span>
                            <span id="csVer_">${requestScope.deviceData.craneProject.craneStandard.csVer==null?"无":requestScope.deviceData.craneProject.craneStandard.csVer}</span>
                        </p>
                        <p>
                            <span>
                                项目名称：
                            </span>
                            <span id="projectId_">${requestScope.deviceData.craneProject.project.prName==null?"无":requestScope.deviceData.craneProject.project.prName}</span>
                        </p>
                        <p>
                            <span>
                                额定吊重：
                            </span>
                            <span id="capacity_">${requestScope.deviceData.craneProject.craneStandard.capacity==null?"无":requestScope.deviceData.craneProject.craneStandard.capacity}</span>
                            <span>t</span>
                        </p>
                        <p>
                            <span>
                                最大幅度：
                            </span>
                            <span id="maxRange_">${requestScope.deviceData.craneProject.craneStandard.maxRange==null?"无":requestScope.deviceData.craneProject.craneStandard.maxRange}</span>
                            <span>m</span>
                        </p>
                        <p>
                            <span>
                                额定力矩：
                            </span>
                            <span id="ratedTorque_">${requestScope.deviceData.craneProject.craneStandard.torque==null?"无":requestScope.deviceData.craneProject.craneStandard.torque}</span>
                            <span>%</span>
                        </p>
                        <p>
                            <span>
                                最大高度：
                            </span>
                            <span id="liftHeight_">${requestScope.deviceData.craneProject.craneStandard.liftHeight==null?"无":requestScope.deviceData.craneProject.craneStandard.liftHeight}</span>
                            <span>m</span>
                        </p>
                    </div>
                    <div class="basicDataCenter">
                        <img src="${path}/html/images/crane/towerCrane.png" style="height: 100%;width: 100%"/>
                    </div>
                    <div class="basicDataRight">
                        <div class="timeRecently">
                            <p>
                                <span id="updateTime_">
                                    无
                                </span>
                                <span>
                                    数据更新时间：
                                </span>
                            </p>
                        </div>
                        <div style="clear: both"></div>
                        <div class="coordinateCircle_out">
                            <p id="coordinate_">坐标("无","无")</p>
                        </div>
                        <div class="coordinateCircle_in1">
                        </div>
                        <div class="coordinateCircle_in2">
                        </div>
                        <div class="coordinateCircle_in3">
                        </div>
                    </div>
                    <div style="clear: both"></div>
                    <div class="basicDataBottom">
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/torque.png"/>
                            </span>
                            <span class="craneValue" id="relTorque_">
                                无
                            </span>
                            <span class="craneUnit">
                                %
                            </span>
                            <span class="craneTitle">
                               力矩
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/range.png"/>
                            </span>
                            <span class="craneValue" id="relRange_">
                               无
                            </span>
                            <span class="craneUnit unitLeft">
                               m
                            </span>
                            <span class="craneTitle">
                               幅度
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/weight.png"/>
                            </span>
                            <span class="craneValue" id="relWeight_">
                                无
                            </span>
                            <span class="craneUnit unitLeft">
                                t
                            </span>
                            <span class="craneTitle">
                               吊重
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/height.png"/>
                            </span>
                            <span class="craneValue" id="relHeight_">
                                无
                            </span>
                            <span class="craneUnit unitLeft">
                                m
                            </span>
                            <span class="craneTitle">
                               高度
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/dipAngle.png"/>
                            </span>
                            <span class="craneValue" id="relDipAngle_">
                                无
                            </span>
                            <span class="craneUnit returnAngle">
                                 °
                            </span>
                            <span class="craneTitle">
                               倾角
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/windSpeed.png"/>
                            </span>
                            <span class="craneValue" id="relWindSpeed_">
                                无
                            </span>
                            <span class="craneUnit">
                                m/s
                            </span>
                            <span class="craneTitle">
                               风速
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                        <div class="craneArgs">
                            <span class="craneArgsImg">
                               <img src="${path}/html/images/crane/returnAngle.png"/>
                            </span>
                            <span class="craneValue" id="relReturnAngle_">
                                无
                            </span>
                            <span class="craneUnit returnAngle">
                                 °
                            </span>
                            <span class="craneTitle">
                               回转角
                            </span>
                            <div class="outdy-progressbar">
                                <div class="dy-progressbar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="craneBox-left-middle">
                <div class="historyDataBorder">
                    <div class="topTitle">
                        <p>
                            <span class="titleDot"></span>
                            <span style="margin-left: 18px;">历史数据</span>
                        </p>
                    </div>
                    <hr class="hrStyle"/>
                    <div class="title">
                        <span id="standardTitle_">起重机械力矩走势图</span>
                    </div>
                    <div class="query-condition">
                        <div class="startTime">
                            <input class="easyui-datetimebox" id="startTime_" data-options="prompt:'请选择开始时间'" style="width:170px; height: 25px">
                        </div>
                        <div class="interval-line">
                            <hr>
                        </div>
                        <div class="endTime">
                            <input class="easyui-datetimebox" id="endTime_" data-options="prompt:'请选择结束时间'" style="width:170px; height: 25px">
                        </div>
                        <div class="time-subsection">
                            <table>
                                <tr>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="second_"><a href="javascript:;">秒</a></td>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="minute_"><a href="javascript:;">分</a></td>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="hour_" style="background-color: skyblue"><a href="javascript:;">时</a></td>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="day_"><a href="javascript:;">天</a ></td>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="weekend_"><a href="javascript:;">周</a></td>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="month_"><a href="javascript:;">月</a></td>
                                    <td class="timeBgStyle" onclick="timeSelect(this)" id="year_"><a href="javascript:;">年</a></td>
                                </tr>
                            </table>
                        </div>
                        <div style="clear: both"></div>
                        <div class="craneType">
                            <div class="craneTypeSelect">
                                <ul>
                                    <li class="craneTypeLi" id="MomentPercent" onclick="craneTypeSelect(this)" style="background-color: skyblue">
                                        <a href="javascript:;">力矩</a>
                                    </li>
                                    <li class="craneTypeLi" id="Radius" onclick="craneTypeSelect(this)">
                                        <a href="javascript:;">幅度</a>
                                    </li>
                                    <li class="craneTypeLi" id="LoadData" onclick="craneTypeSelect(this)">
                                        <a href="javascript:;">吊重</a>
                                    </li>
                                    <li class="craneTypeLi" id="Height" onclick="craneTypeSelect(this)">
                                        <a href="javascript:;">高度</a>
                                    </li>
                                    <li class="craneTypeLi" id="ObliqueAngle" onclick="craneTypeSelect(this)">
                                        <a href="javascript:;">倾角</a>
                                    </li>
                                    <li class="craneTypeLi" id="WindSpeed" onclick="craneTypeSelect(this)">
                                        <a href="javascript:;">风速</a>
                                    </li>
                                    <li class="craneTypeLi" id="Angle" onclick="craneTypeSelect(this)">
                                        <a href="javascript:;">回转角</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="craneTypeEchart" id="craneTypeEchart_">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="craneBox-right-top">
            <div class="topTitle">
                <p>
                    <span class="titleDot"></span>
                    <span style="margin-left: 18px;">已安装起重机械设备</span>
                </p>
            </div>
            <hr class="hrStyle"/>
            <c:if test="${requestScope.deviceData.deviceList == null || fn:length(requestScope.deviceData.deviceList) == 0}">
                <div>
                    <img src="${path}/html/images/dust/deviceNoData.jpg" style="width: 240px;height: 170px;margin-top: 150px;margin-left: 20px;"/>
                </div>
            </c:if>
            <c:if test="${requestScope.deviceData.deviceList != null && fn:length(requestScope.deviceData.deviceList) > 0}">
                <c:forEach items="${requestScope.deviceData.deviceList}" var="deviceObj">
                    <div class="installedDevice" onclick="deviceClick(this)">
                        <div class="deviceNumber">
                            <p class="deviceNumberInner">${deviceObj.deviceId}</p>
                        </div>
                        <div class="craneDevice">
                            <img src="${path}/html/images/crane/towerCrane.png"/>
                        </div>
                        <div class="craneArea">
                            <p class="deviceAreaInner">${deviceObj.deviceName}</p>
                        </div>
                    </div>
                </c:forEach>
            </c:if>
        </div>
        <div class="craneBox-right-bottom">
            <div class="topTitle">
                <p>
                    <span class="titleDot"></span>
                    <span style="margin-left: 18px;">警示信息</span>
                </p>
            </div>
            <hr class="hrStyle"/>
            <div class="alarm-content">
                <table class="alarm-table">
                    <tr class="alarm-title">
                        <td>报警内容</td>
                        <td>报警时间</td>
                        <td>是否处理</td>
                    </tr>
                    <c:forEach items="${requestScope.deviceData.alarmList}" var="alarmObj">
                        <tr class="alarm-args">
                            <td>${alarmObj.alarmContent}</td>
                            <td>${alarmObj.alarmTime}</td>
                            <td>${alarmObj.alarmStatus}</td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </div>
    </body>
</html>